<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)
const props = defineProps(['tableData'])

const initEcharts = ((item) => {
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        top:'40',
        left: '20',
        right: '20',
        bottom: '40',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,//坐标轴两边留白
        data: props.tableData.map(item=>{
          return item.year
        }),
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#999999',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
          },
        },
        axisTick:{//坐标轴刻度相关设置。
          show: false,
        },
        axisLine:{
          show:true,
          lineStyle:{
            color:'#cccccc',
          }
        },
        splitLine: { //坐标轴在 grid 区域中的分隔线。
          show: false,
          lineStyle: {
            color: '#cccccc',
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          splitNumber: 5,
          axisLabel: {
            textStyle: {
              color: '#a8aab0',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 14,
            }
          },
          axisLine:{
            show: false
          },
          axisTick:{
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E5E9ED',
            }
          }
        }
      ],
      series: [
        {
          type: 'line',
          showAllSymbol:false,
          itemStyle: {normal: {
              color:'#f28737',
              lineStyle: {
                color: "#f28737",
                width:3
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(242, 135, 55,0)'
                }, {
                  offset: 1,
                  color: 'rgba(242, 135, 55,0.19)'
                }]),
              }
            }
          },
          data: props.tableData.map(item=>{
            return item.count
          })
        },
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})
watch(() => props.tableData, (newValue, oldValue) => {
  initEcharts(newValue)
}, {immediate: true, deep: true})

onMounted(() => {
  initEcharts(props.tableData)
})

</script>

<style lang="less" scoped>
</style>
